<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> 
</body>
</html>

<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");


	// 创建渐变
	var grd=ctx.createRadialGradient(75,50,5,90,60,100);
	grd.addColorStop(0,"red");
	grd.addColorStop(1,"white");
	 
	// 填充渐变
	ctx.fillStyle=grd;
	ctx.fillRect(10,10,150,80);
</script>
